<template>
	<PageLayout title="我的电子名片" :show-back="false">
		<view class="card-container">
			<!-- 用条件渲染替代动态组件 -->
			<template v-if="selectedTemplateComponent === 'TemplateDefault'">
				<TemplateDefault :card-info="cardInfo" />
			</template>
			<template v-else-if="selectedTemplateComponent == 'TemplateElegant'">
				<TemplateElegant :card-info="cardInfo" />
			</template>
			<template v-else-if="selectedTemplateComponent === 'TemplateModern'">
				<TemplateModern :card-info="cardInfo" />
			</template>
			<template v-else-if="selectedTemplateComponent === 'TemplateProfessional'">
				<TemplateProfessional :card-info="cardInfo" />
			</template>
		</view>
		<!-- 	<view class="action-bt">
			<view class="action-button" @click="goToTemplates">
				<text>更换模板</text>
			</view>
			<view class="action-button" @click="goToSharePage">
				<text>分享名片</text>
			</view>
		</view> -->

		<view class="share-actions">
			<button class="share-btn" @click="goToTemplates">
				<text>编辑名片</text>
			</button>
			<button class="share-btn" open-type="share">
				<text>微信好友</text>
			</button>
			<button class="save-btn" @click="saveToAlbum">
				<text>保存图片</text>
			</button>
		</view>
	</PageLayout>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	import {
		useRouter
	} from '@/plugin/uni-mini-router'
	import TemplateDefault from '@/pages/mycard/components/TemplateDefault'
	import TemplateElegant from '@/pages/mycard/components/TemplateElegant'
	import TemplateModern from '@/pages/mycard/components/TemplateModern'
	import TemplateProfessional from '@/pages/mycard/components/TemplateProfessional'

	import {
		cardStore
	} from '@/store/card.ts';

	const cdStore = cardStore()
	// 路由实例
	const router = useRouter()

	// 状态管理
	const {
		templateInfo,
		cardInfo
	} = cdStore

	onMounted(() => {})
	// 分享图片临时路径
	const shareImagePath = ref('')
	// 根据选中的模板动态选择组件
	const selectedTemplateComponent = computed(() => {
		switch (templateInfo.type) {
			case 'default':
				return "TemplateDefault"
			case 'elegant':
				return "TemplateElegant"
			case 'modern':
				return "TemplateModern"
			case 'professional':
				return "TemplateProfessional"
			default:
				return "TemplateDefault"
		}
	})

	// 跳转到模板选择页
	const goToTemplates = () => {
		router.push({
			path: '/pages/mycard/templateSelect'
		})
	}

	// 跳转到分享页面
	const goToSharePage = () => {
		router.push({
			path: '/pages/card/cardShare',
			query: {
				cardId: cardInfo.id // 传递名片ID
			}
		})
	}
	// 保存图片到相册
	const saveToAlbum = () => {
		if (!shareImagePath.value) {
			uni.showToast({
				title: '图片生成中，请稍候',
				icon: 'none'
			});
			return;
		}

		uni.saveImageToPhotosAlbum({
			filePath: shareImagePath.value,
			success: () => {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
			},
			fail: (err) => {
				console.error('保存图片失败:', err);
				uni.showToast({
					title: '保存失败，请重试',
					icon: 'none'
				});
			}
		});
	};
</script>

<style scoped>
	.card-container {
		padding: 20rpx;
		min-height: 600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.action-button {
		/* position: fixed; */
		bottom: 60rpx;
		margin-top: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #007aff;
		color: white;
		padding: 20rpx 60rpx;
		border-radius: 60rpx;
		font-size: 32rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}


	/* 分享操作区 */
	.share-actions {
		display: flex;
		gap: 30rpx;
		padding: 0 40rpx 60rpx;
	}

	.share-btn,
	.save-btn {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		font-size: 30rpx;
	}

	.share-btn {
		background-color: #d4af37;
		color: #ffffff;
	}

	.save-btn {
		background-color: #f0e8d9;
		color: #8b6e4e;
	}

	/* 隐藏的canvas */
	.share-canvas {
		position: fixed;
		top: -10000rpx;
		left: -10000rpx;
		width: 750rpx;
		height: 1000rpx;
	}
</style>